<template>
  <div>
    <div class="kg-total">知识总数：{{ total }}</div>

    <div class="chart-div" id="classiFication"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { categorySta } from "@/api/statisticsKg/analysis";
// let test = [
//   // 注意，最外层是一个数组，而非从某个根节点开始。
//   {
//     value: 50,
//     name: "description of this node", // 显示在矩形中的描述文字。
//     children: [
//       {
//         value: 2323, // value字段的值，对应到面积大小。
//         // 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
//         // 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。
//         id: "someid-1", // id 不是必须设置的。
//         // 但是如果想使用 API 来改变某个节点，需要用 id 来定位。
//         name: "description of this node", // 显示在矩形中的描述文字。
//         children: [],
//         label: {
//           // 此节点特殊的 label 定义（如果需要的话）。
//           // label的格式参见 series-treemap.label。
//         },
//         itemStyle: {
//           // 此节点特殊的 itemStyle 定义（如果需要的话）。
//           // label的格式参见 series-treemap.itemStyle。
//         },
//       },
//       {
//         value: 4545,
//         id: "someid-2",
//         name: "description of this node",
//         children: [
//           {
//             value: 5656,
//             id: "someid-3",
//             name: "description of this node",
//             children: [],
//           },
//         ],
//       },
//     ],
//   },
//   {
//     value: [500, 43000, 55],
//     name: "description1111111", // 显示在矩形中的描述文字。
//     // 如果没有children，可以不写
//   },
//   {
//     value: [50, 1111],
//     name: "description11122211", // 显示在矩形中的描述文字。
//     // 如果没有children，可以不写
//   },
// ];
let colors = [
  "#3D58A4",
  "#336DFC",
  "#3A72DE",
  "#44A0F6",
  "#5BD9A7",
  "#51B5C7",
  "#279999",
  "#FF9F4E",
  "#E86B4D",
  "#E84D4D",
];
let chartOption = ref({
  tooltip: {
    formatter: function (params) {
      console.log(params);
      return `<div style="min-width: 120px">
                <p style="font-size:16px;margin-bottom:6px">${params.name}</p>
                <p style="margin-left:6px">知识总数：${
                  Array.isArray(params.data.value) ? 0 : params.data.value
                }</p>
                <p style="margin-left:6px">直属该分类知识总数：${
                  params.data.countDirectNode
                }</p>
                <p style="margin-left:6px">下级分类中知识总数：${
                  params.data.countSubNode
                }</p>
              </div>`;
    },
  },
  series: [
    {
      name: "顶级",
      type: "treemap",
      top: "top",
      width: "100%",
      height: "90%",
      visibleMin: -1,
      zoomToNodeRatio: 2,
      nodeClick: "false",
      data: [],
      leafDepth: 1,
      levels: [
        {
          colorSaturation: [0.3, 0.6],
          color: colors,
          itemStyle: {
            gapWidth: 2,
            borderWidth: 2,
          },
        },
        {
          colorSaturation: [0.3, 0.6],
          color: colors,
          itemStyle: {
            gapWidth: 2,
            borderWidth: 2,
          },
        },
        {
          colorSaturation: [0.3, 0.5],
          color: colors,
          itemStyle: {
            gapWidth: 1,
          },
        },
        {
          colorSaturation: [0.3, 0.5],
        },
      ],
    },
  ],
});

let total = ref("");

onMounted(() => {
  getData();
  // init();
});

const init = () => {
  var chartDom = document.getElementById("classiFication");
  var myChart = echarts.init(chartDom);

  myChart.setOption(chartOption.value);

  window.onresize = function () {
    myChart.resize();
  };
};

const getData = () => {
  categorySta().then((res) => {
    let source = res.data;
    convert(source.children); // 处理总数为0的数据使其显示在树图中
    // console.log(res.data.children);
    let data = JSON.parse(
      JSON.stringify([source]).replaceAll("totalCount", "value")
    );
    chartOption.value.series[0].data = data;
    total.value = res.data.totalCount;

    init();
  });
};

/**
 * 处理总数为0的数据不显示，逻辑为当总数为0时采取数组的方式，面积默认为总数不为0的四分之一
 * value: 2323, // value字段的值，对应到面积大小。 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
 */
const convert = (source) => {
  // console.log(source, "111");
  let min = null; // 总数不为0的最小数
  for (let i = 0; i < source.length; i++) {
    if (!source[i].totalCount) {
      // 总数为0
      if (!min) {
        min = i ? source[i - 1].totalCount : 100;
      }
      source[i].totalCount = [min / 4, 1111]; // 面积为最小总数不为0的值四分之一
    }
    source[i].children ? convert(source[i].children) : "";
  }
};
</script>

<style scoped lang="scss">
.kg-total {
  margin: 18px 0 16px;
  font-size: 16px;
  color: #222;
}

.chart-div {
  width: 100%;
  height: calc(100vh - 250px);
}
</style>
